<template>
  <view class="edit-container">
    <u-form :model="formData" ref="form" :rules="rules" label-width="80">
      <!-- 基本信息 -->
      <view class="section-card">
        <view class="section-title">基本信息</view>
        
        <u-form-item label="所属门店" prop="mchId" required>
          <u-input
            v-model="formData.mchName"
            placeholder="请选择门店"
            disabled
            @click="showStorePicker = true"
          ></u-input>
        </u-form-item>

        <u-form-item label="房间名称" prop="roomName" required>
          <u-input
            v-model="formData.roomName"
            placeholder="请输入房间名称"
          ></u-input>
        </u-form-item>

        <u-form-item label="房间类型" prop="roomType" required>
          <u-radio-group v-model="formData.roomType">
            <u-radio 
              v-for="(item, index) in roomTypes" 
              :key="index"
              :label="item.label"
              :name="item.value"
              :customStyle="{marginRight: '16px'}"
            ></u-radio>
          </u-radio-group>
        </u-form-item>

        <u-form-item label="房间状态" prop="status">
          <u-radio-group v-model="formData.status">
            <u-radio 
              v-for="(item, index) in statusOptions" 
              :key="index"
              :label="item.label"
              :name="item.value"
              :customStyle="{marginRight: '16px'}"
            ></u-radio>
          </u-radio-group>
        </u-form-item>
      </view>

      <!-- 价格设置 -->
      <view class="section-card">
        <view class="section-title">价格设置</view>
        
        <u-form-item label="小时单价" prop="hourPrice" required>
          <view class="price-input">
            <text class="prefix">¥</text>
            <u-input
              v-model="formData.hourPrice"
              type="number"
              placeholder="请输入小时单价"
            ></u-input>
          </view>
        </u-form-item>

        <u-form-item label="最少时长" prop="minHours" required>
          <view class="hour-input">
            <u-number-box
              v-model="formData.minHours"
              :min="1"
              :max="24"
            ></u-number-box>
            <text class="unit">小时</text>
          </view>
        </u-form-item>
      </view>

      <!-- 图片上传 -->
      <view class="section-card">
        <view class="section-title">房间图片</view>
        
        <view class="upload-content">
          <view class="image-list">
            <view 
              class="image-item" 
              v-for="(item, index) in formData.images" 
              :key="index"
            >
              <image 
                :src="item" 
                mode="aspectFill"
                @click="previewImage(formData.images, index)"
              ></image>
              <view class="delete-btn" @click="deleteImage(index)">
                <u-icon name="close" color="#fff" size="24"></u-icon>
              </view>
            </view>
            <view 
              class="upload-btn" 
              @click="chooseImage" 
              v-if="formData.images.length < 5"
            >
              <u-icon name="camera" size="40" color="#999"></u-icon>
              <text>上传图片</text>
            </view>
          </view>
          <text class="upload-tip">最多上传5张图片</text>
        </view>
      </view>

      <!-- 房间说明 -->
      <view class="section-card">
        <view class="section-title">房间说明</view>
        
        <u-form-item label="房间描述">
          <u-input
            v-model="formData.description"
            type="textarea"
            placeholder="请输入房间描述"
            height="200"
          ></u-input>
        </u-form-item>
      </view>
    </u-form>

    <!-- 底部按钮 -->
    <view class="bottom-btns">
      <u-button type="primary" @click="submitForm">保存</u-button>
      <u-button type="default" @click="goBack">关闭</u-button>
    </view>

    <!-- 门店选择器 -->
    <u-picker
      :show="showStorePicker"
      :columns="[storeList]"
      @confirm="onStoreConfirm"
      @cancel="showStorePicker = false"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: '', // 房间ID
        mchId: '', // 门店ID
        mchName: '', // 门店名称
        roomName: '', // 房间名称
        roomType: '1', // 房间类型
        status: '0', // 房间状态
        hourPrice: '', // 小时单价
        minHours: 1, // 最少时长
        images: [], // 房间图片
        description: '' // 房间描述
      },
      
      showStorePicker: false,
      storeList: [],
      
      roomTypes: [
        {label: '小包', value: '1'},
        {label: '中包', value: '2'},
        {label: '大包', value: '3'},
        {label: '豪华包', value: '4'}
      ],
      
      statusOptions: [
        {label: '空闲中', value: '0'},
        {label: '使用中', value: '1'},
        {label: '待保洁', value: '2'},
        {label: '保洁中', value: '3'}, 
        {label: '维护中', value: '4'}
      ],
      
      rules: {
        mchId: [{
          required: true,
          message: '请选择门店'
        }],
        roomName: [{
          required: true,
          message: '请输入房间名称'
        }],
        roomType: [{
          required: true,
          message: '请选择房间类型'
        }],
        hourPrice: [{
          required: true,
          message: '请输入小时单价'
        }],
        minHours: [{
          required: true,
          message: '请输入最少时长'
        }]
      }
    }
  },
  
  onLoad(options) {
    if(options.type === 'edit') {
      // 从 storage 获取编辑数据
      const editData = uni.getStorageSync('roomInfo')
      if(editData) {
        this.formData = {
          ...this.formData,
          ...editData
        }
		console.log(editData.mchName)
      }
    }
    this.getStoreList()
  },
  
  methods: {
    // 获取房间详情
    getRoomDetail(id) {
      uni.$u.http.get(`/system/room/${id}`).then(res => {
        if(res.code === 0) {
          this.formData = res.data
        }
      })
    },
    
    // 获取门店列表
    getStoreList() {
      uni.$u.http.post('/system/merchant/list', {
        pageNum: 1,
        pageSize: 100
      }).then(res => {
        if(res.code === 0) {
          this.storeList = res.rows.map(item => ({
            label: item.mchName,
            value: item.id
          }))
        }
      })
    },
    
    // 门���选择
    onStoreConfirm(e) {
      const item = this.storeList[e.value[0]]
      this.formData.mchId = item.value
      this.formData.mchName = item.label
      this.showStorePicker = false
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 5 - this.formData.images.length,
        success: (res) => {
          const tempFilePaths = res.tempFilePaths
          tempFilePaths.forEach(path => {
            uni.uploadFile({
              url: '/system/upload/image',
              filePath: path,
              name: 'file',
              success: (uploadRes) => {
                const data = JSON.parse(uploadRes.data)
                if(data.code === 0) {
                  this.formData.images.push(data.url)
                }
              }
            })
          })
        }
      })
    },
    
    // 删除图片
    deleteImage(index) {
      this.formData.images.splice(index, 1)
    },
    
    // 预览图片
    previewImage(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current
      })
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if(valid) {
          const url = this.formData.id ? '/system/room/update' : '/system/room/add'
          uni.$u.http.post(url, this.formData).then(res => {
            if(res.code === 0) {
              uni.showToast({
                title: '保存成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
          })
        }
      })
    },
    
    // 返回
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.section-card {
  background: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
    margin-bottom: 20rpx;
  }
}

.price-input {
  display: flex;
  align-items: center;
  
  .prefix {
    margin-right: 10rpx;
    color: #666;
  }
  
  .u-input {
    flex: 1;
  }
}

.hour-input {
  display: flex;
  align-items: center;
  
  .unit {
    margin-left: 20rpx;
    color: #666;
  }
}

.upload-content {
  padding: 20rpx;
  
  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    
    .image-item {
      position: relative;
      width: 160rpx;
      height: 160rpx;
      
      image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
      
      .delete-btn {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 40rpx;
        height: 40rpx;
        background: rgba(0,0,0,0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      border: 2rpx dashed #ddd;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fafafa;
      
      text {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
    }
  }
  
  .upload-tip {
    font-size: 24rpx;
    color: #999;
    margin-top: 20rpx;
  }
}

.bottom-btns {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx;
  background: #fff;
  display: flex;
  justify-content: center;
  gap: 30rpx;
  box-shadow: 0 -2rpx 6rpx rgba(0,0,0,0.05);
}

:deep(.u-form-item) {
  padding: 20rpx;
  margin-bottom: 10rpx;
}
</style>